<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '#' }">
                运动会系统信息管理
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="#">运动会等级标准</a>
            </el-breadcrumb-item>
        </el-breadcrumb>

        <el-card class="gn-card">
            <div class="gn-select">
                <div class="gn_type">
                    <el-form>
                        <el-form-item label="类型：">
                            <el-select v-model="dtype">
                                <el-option label="等级" value="0"></el-option>
                                <el-option label="达标" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="gn_norn">
                    <el-form label-width="100">
                        <el-form-item label="标准名称：">
                            <el-select v-model="nornname">
                                <el-option v-for="(item, index) in typeData" :key="index + 1" :label="item.expressname"
                                    :value="item.expressname">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="gn_sex">
                    <el-form label-width="80">
                        <el-form-item label="性别：">
                            <el-select v-model="sex">
                                <el-option label="男子" :value="1"></el-option>
                                <el-option label="女子" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="gn_add">
                    <el-button type="warning" @click="showadd">添加</el-button>
                </div>
                <div class="cosp4">
                    <el-button type="danger" @click="del_unit">删除标准</el-button>
                </div>
                <div class="cosp5">
                    <el-button type="primary" @click="leadFileVisible = true">导入</el-button>
                    <el-button type="primary" @click="exportExcel">导出</el-button>
                </div>
            </div>
            <!-- 高校等级标准表格 -->
            <el-table :data="currentPageData" border stripe :header-cell-style="headClass">
                <el-table-column prop="etname" label="项目" align="center">
                </el-table-column>
                <el-table-column v-if="dtype === '0'" label="国际运动健将" align="center">
                    <template #default="scope">
                        {{ scope.row.slevel1Name === "00:00:00.000" ? '' : scope.row.slevel1Name }}
                    </template>
                </el-table-column>
                <el-table-column v-if="dtype === '1'" label="达标" align="center">
                    <template #default="scope">
                        {{ scope.row.slevel1Name === "00:00:00.000" ? '' : scope.row.slevel1Name }}
                    </template>
                </el-table-column>
                <el-table-column v-if="dtype === '0'" label="运动健将" align="center">
                    <template #default="scope">
                        {{ scope.row.slevel2Name === "00:00:00.000" ? '' : scope.row.slevel2Name }}
                    </template>
                </el-table-column>
                <el-table-column v-if="dtype === '1'" align="center">
                </el-table-column>
                <el-table-column v-if="dtype === '0'" label="12级" align="center">
                    <template #default="scope">
                        {{ scope.row.slevel3Name === "00:00:00.000" ? '' : scope.row.slevel3Name }}
                    </template>
                </el-table-column>
                <el-table-column v-if="dtype === '1'" align="center">
                </el-table-column>
                <el-table-column v-if="dtype === '0'" label="11级" align="center">
                    <template #default="scope">
                        {{ scope.row.slevel4Name === "00:00:00.000" ? '' : scope.row.slevel4Name }}
                    </template>
                </el-table-column>
                <el-table-column v-if="dtype === '1'" align="center">
                </el-table-column>
                <el-table-column v-if="dtype === '0'" label="10级" align="center">
                    <template #default="scope">
                        {{ scope.row.slevel5Name === "00:00:00.000" ? '' : scope.row.slevel5Name }}
                    </template>
                </el-table-column>
                <el-table-column v-if="dtype === '1'" align="center">
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <el-button type="primary" @click="showeditdialog(scope.row)">修改</el-button>
                        <el-button type="danger" @click="gndelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="paging" @size-change="handleSizeChange" @current-change="handlePageChange" background
                :page-sizes="[3, 5, 10, 15, 20, 50]" layout="total, prev, pager, next, jumper" :total="total"
                :page-size="queryObj.limit" :current-page="queryObj.page">
            </el-pagination>

            <!-- 导入 -->
            <el-dialog title="导入" v-model="leadFileVisible" width="20%" draggable>
                <input type="file" class="dialog-inp" @change="handleFileUpload">
                <div slot="footer" class="dialog-footer">
                    <el-button @click="leadFileVisible = false">取 消</el-button>
                    <el-button type="primary" @click="uploadFile">确 定</el-button>
                </div>
            </el-dialog>

            <!-- 增加页面 -->
            <el-dialog title="新增" v-model="adddialogVisible" draggable width="40%" :before-close="addleClose">
                <el-form :model="addfrom" label-width="90" :rules="rules" ref="addForm">
                    <el-form-item label="标准名称：">
                        <el-input v-model="addfrom.expressname"></el-input>
                    </el-form-item>
                    <el-form-item prop="etname" label="项目：">
                        <el-input v-model="addfrom.etname"></el-input>
                    </el-form-item>
                    <div class="view_teble">
                        <table class="addtable" cellspacing="0" cellpadding='5'>
                            <tbody>
                                <tr class="header_tr">
                                    <td>等级</td>
                                    <td>成绩</td>
                                </tr>
                                <tr v-if="dtype === '0'">
                                    <td>国际运动健将</td>
                                    <td>
                                        <el-input v-model="addfrom.slevel1Name"></el-input>
                                    </td>
                                </tr>
                                <tr v-if="dtype === '1'">
                                    <td>达标</td>
                                    <td>
                                        <el-input v-model="addfrom.slevel1Name"></el-input>
                                    </td>
                                </tr>
                                <tr v-if="dtype === '0'">
                                    <td>运动健将</td>
                                    <td>
                                        <el-input v-model="addfrom.slevel2Name"></el-input>
                                    </td>
                                </tr>
                                <tr v-if="dtype === '0'">
                                    <td>12级</td>
                                    <td>
                                        <el-input v-model="addfrom.slevel3Name"></el-input>
                                    </td>
                                </tr>
                                <tr v-if="dtype === '0'">
                                    <td>11级</td>
                                    <td>
                                        <el-input v-model="addfrom.slevel4Name"></el-input>
                                    </td>
                                </tr>
                                <tr v-if="dtype === '0'">
                                    <td>10级</td>
                                    <td>
                                        <el-input v-model="addfrom.slevel5Name"></el-input>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </el-form>
                <div class="add_tips">
                    <p class="tips_p1">提示：</p>
                    <p class="tips_p2">1. 可任意添加新标准，每个标准最多可设1到5个等级。</p>
                    <p class="tips_p2">2. 所有项目定义要和比赛项目一致。</p>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addleClose">取 消</el-button>
                    <el-button type="primary" @click="addgn">确 定</el-button>
                </div>
            </el-dialog>

            <!-- 修改页面 -->
            <el-dialog title="修改" v-model="editdialogVisible" draggable width="40%" :before-close="handleClose">
                <el-form :model="editfrom" label-width="90">
                    <el-form-item label="标准名称：">
                        <span>{{ editfrom.expressname }}</span>
                    </el-form-item>
                    <el-form-item label="项目：">
                        <el-input v-model="editfrom.etname"></el-input>
                    </el-form-item>
                    <div class="view_teble">
                        <table class="addtable" cellspacing="0" cellpadding='5'>
                            <tbody>
                                <tr class="header_tr">
                                    <td>等级</td>
                                    <td>成绩</td>
                                </tr>
                                <tr v-if="dtype === '0'">
                                    <td>国际运动健将</td>
                                    <td>
                                        <el-input v-model="editfrom.slevel1Name"></el-input>
                                    </td>
                                </tr>
                                <tr v-if="dtype === '1'">
                                    <td>达标</td>
                                    <td>
                                        <el-input v-model="editfrom.slevel1Name"></el-input>
                                    </td>
                                </tr>
                                <tr v-if="dtype === '0'">
                                    <td>运动健将</td>
                                    <td>
                                        <el-input v-model="editfrom.slevel2Name"></el-input>
                                    </td>
                                </tr>
                                <tr v-if="dtype === '0'">
                                    <td>12级</td>
                                    <td>
                                        <el-input v-model="editfrom.slevel3Name"></el-input>
                                    </td>
                                </tr>
                                <tr v-if="dtype === '0'">
                                    <td>11级</td>
                                    <td>
                                        <el-input v-model="editfrom.slevel4Name"></el-input>
                                    </td>
                                </tr>
                                <tr v-if="dtype === '0'">
                                    <td>10级</td>
                                    <td>
                                        <el-input v-model="editfrom.slevel5Name"></el-input>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </el-form>
                <div slot="footer" class="dialog-footer2">
                    <el-button @click="cancelEdit">取 消</el-button>
                    <el-button type="primary" @click="editGradeinfo">确 定</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import XLSX from 'xlsx'
export default {
    components: {
        XLSX,
    },
    data() {
        return {
            queryObj: {
                limit: 10,
                page: 1,
                query: " "
            },
            total: 0,
            currentPageData: [],
            dtype: '0',
            nornname: '高校等级标准',
            sex: 1,
            allTopinfo: {
                dtype: "0",
                expressname: '高校等级标准',
                sex: "1",
            },
            typeData: [],
            higherData: [],
            adddialogVisible: false,
            addfrom: {
                expressname: '',
                etname: '',
                slevel1Name: '00:00:00.000',
                slevel2Name: '00:00:00.000',
                slevel3Name: '00:00:00.000',
                slevel4Name: '00:00:00.000',
                slevel5Name: '00:00:00.000',
                slevel1: null,
                slevel2: null,
                slevel3: null,
                slevel4: null,
                slevel5: null,
            },
            initialForm: {},
            editdialogVisible: false,
            editfrom: {},
            leadFileVisible: false,
            formData: null,
            rules: {
                etname: [
                    { required: true, message: '', trigger: 'blur' },
                ],
            }
        }
    },
    created() {
        this.initialForm = { ...this.addfrom }
        this.getGradeNornList(this.dtype);
        this.getallInfoist();
    },
    methods: {
        headClass() {
            return { 'background': '#f0b653', 'color': '#FFFFFF' }
        },
        // 查询
        async getGradeNornList(dtype) {
            const result = await this.$http.post(this.BACKEND_URL + '/degree/getName', { dtype: dtype });
            if (result.data.code == 0) {
                this.typeData = result.data.data
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        async getallInfoist() { // 数据
            try {
                const result = await this.$http.post(this.BACKEND_URL + '/degree/getmsg', this.allTopinfo);
                if (result.data.code == 0) {
                    this.higherData = result.data.data
                    this.total = this.higherData.length
                    this.fetchData()
                } else if (result.data.code == 500) {
                    console.log(result.data.msg)
                }
            } catch (error) {
                if (error === undefined) {
                    this.$message.error('连接错误-获取数据失败');
                }
            }
        },
        // 转化记录时间格式
        formatTime(value) {
            const [hours, minutes, seconds] = value.split(':');
            const milliseconds = (parseInt(hours, 10) * 3600 + parseInt(minutes, 10) * 60 + parseFloat(seconds)) * 1000;
            return milliseconds
        },
        //删除
        gndelete(e) {
            this.$confirm('此操作将删除改条数据，是否继续', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(async () => {
                const result = await this.$http.post(this.BACKEND_URL + '/degree/deletemsg', e)
                if (result.data.code === 0) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getallInfoist()
                } else if (result.data.code == 500) {
                    this.$message.error(result.data.msg)
                }
            }).catch(() => {
            });
        },
        // 添加
        showadd() {
            this.adddialogVisible = true
            this.addfrom.expressname = this.nornname
            this.addfrom.sex = this.sex
            this.addfrom.dtype = this.dtype
        },
        addgn() {
            this.$refs.addForm.validate(async (valid) => {
                if (valid) {
                    this.addfrom.slevel1 = this.formatTime(this.addfrom.slevel1Name)
                    this.addfrom.slevel2 = this.formatTime(this.addfrom.slevel2Name)
                    this.addfrom.slevel3 = this.formatTime(this.addfrom.slevel3Name)
                    this.addfrom.slevel4 = this.formatTime(this.addfrom.slevel4Name)
                    this.addfrom.slevel5 = this.formatTime(this.addfrom.slevel5Name)
                    const result = await this.$http.post(this.BACKEND_URL + '/degree/insertmsg', this.addfrom)
                    if (result.data.code == 0) {
                        this.adddialogVisible = false
                        this.getallInfoist();
                        this.getGradeNornList(this.dtype);
                        this.$message.success('添加成功')
                        this.addfrom = { ...this.initialForm }
                    } else if (result.data.code == 500) {
                        this.addfrom = { ...this.initialForm }
                        this.$message.error(result.data.msg)
                    }
                } else {
                    this.$message.error('项目名不能为空');
                }
            });
        },
        addleClose() {
            this.adddialogVisible = false
            this.addfrom = { ...this.initialForm }
        },
        // 获取单个数据信息
        async showeditdialog(info) {
            this.editdialogVisible = true
            this.editfrom = info
            this.editfrom.expressname = this.nornname
        },
        async editGradeinfo() {
            this.editfrom.slevel1 = this.formatTime(this.editfrom.slevel1Name)
            this.editfrom.slevel2 = this.formatTime(this.editfrom.slevel2Name)
            this.editfrom.slevel3 = this.formatTime(this.editfrom.slevel3Name)
            this.editfrom.slevel4 = this.formatTime(this.editfrom.slevel4Name)
            this.editfrom.slevel5 = this.formatTime(this.editfrom.slevel5Name)
            const result = await this.$http.post(this.BACKEND_URL + '/degree/updatemsg', this.editfrom)
            if (result.data.code == 0) {
                this.editdialogVisible = false
                this.getallInfoist();
                this.$message.success('修改成功')
            } else if (result.data.code == 500) {
                this.getallInfoist();
                this.$message.error(result.data.msg)
            }
        },
        cancelEdit() {
            this.editdialogVisible = false
            this.getallInfoist()
        },
        handleClose(done) {
            this.getallInfoist()
            done()
        },
        // 导入
        handleFileUpload(e) {
            let file = e.target.files[0]
            this.formData = new FormData()
            this.formData.append('file', file);
        },
        async uploadFile() {
            const result = await this.$http.post(this.BACKEND_URL + '/degree/excel', this.formata, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            });
            if (result.data.code == 0) {
                this.leadFileVisible = false
                this.getallInfoist();
                this.$message({
                    type: 'success',
                    message: '导入成功!'
                });
            } else if (result.data.code == 500) {
                this.$message({
                    type: 'error',
                    message: '导入失败!'
                });
                console.log(result.data.msg)
            }
        },
        // 表格+数据导出
        async exportExcel() {
            try {
                const result = await this.$http.post(this.BACKEND_URL + '/degree/export', this.allTopinfo, {
                    responseType: 'blob',
                });

                let downloadUrl = window.URL.createObjectURL(new Blob([result.data]));

                const link = document.createElement('a');
                link.href = downloadUrl;
                link.setAttribute('download', this.allTopinfo.expressname + '.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            } catch (error) {
                console.error('File export failed:', error);
            }
        },
        // 删除标准
        del_unit() {
            if (this.dtype == '2') {
                this.achieveData = []
            } else {
                this.higherData = []
            }
        },
        // 分页
        fetchData() {
            let startIndex = (this.queryObj.page - 1) * this.queryObj.limit;
            let endIndex = startIndex + this.queryObj.limit;
            this.currentPageData = this.higherData.slice(startIndex, endIndex);
        },
        handleSizeChange(newSize) {
            this.queryObj.limit = newSize
        },
        handlePageChange(newPage) {
            this.queryObj.page = newPage;
            let startIndex = (newPage - 1) * this.queryObj.limit;
            let endIndex = startIndex + this.queryObj.limit;
            this.currentPageData = this.higherData.slice(startIndex, endIndex);
        }
    },
    watch: {
        dtype(newGroupName, oldGroupName) {
            if (newGroupName !== oldGroupName) {
                this.getGradeNornList(newGroupName);
                if (newGroupName === '0') {
                    this.allTopinfo.dtype = newGroupName
                    this.allTopinfo.expressname = '高校等级标准'
                    this.nornname = "高校等级标准"
                } else if (newGroupName === '1') {
                    this.allTopinfo.dtype = newGroupName
                    this.allTopinfo.expressname = '高校达标标准'
                    this.nornname = "高校达标标准"
                }
                this.getallInfoist();
            }
        },
        sex(newGroupName, oldGroupName) {
            if (newGroupName !== oldGroupName) {
                this.allTopinfo.sex = newGroupName
                this.getallInfoist();
            }
        },
        nornname(newGroupName, oldGroupName) {
            if (newGroupName !== oldGroupName) {
                this.allTopinfo.expressname = newGroupName
                this.getallInfoist();
            }
        },
    }
}
</script>

<style lang="less" scoped>
.gn-card {
    margin-top: 15px
}

// 遮罩层表格
.view_teble {
    display: flex;
    justify-content: center;
}

.addtable {
    border: 1px solid #abb3bd;

    tr td {
        border: 1px solid #abb3bd;
    }

    :deep(.el-input__wrapper) {
        box-shadow: none;

        .el-input__inner {
            text-align: center;
        }
    }

    :deep(.el-input__wrapper:hover) {
        box-shadow: 0 0 0 1px #595f66;
    }
}

.header_tr {
    background-color: #FEFEDF;
}

.add_tips {
    text-align: left;
    margin: 10px 0 0 10px;

    .tips_p1 {
        color: #abb3bd;
        font-weight: bold;
    }

    .tips_p2 {
        font-size: 13px;
        color: #abb3bd;
        margin-left: 30px;
    }
}

.dialog-footer {
    margin-top: 15px;
}

.dialog-footer2 {
    margin-top: 15px;
}

.dialog-inp {
    border: 1px solid #ccc;
}

.paging {
    margin-top: 15px;
}

.gn-select {
    display: flex;

    .gn_type {
        width: 140px;
    }

    .gn_norn {
        width: 240px;
    }

    .gn_sex {
        width: 160px;
    }

    .gn_add {
        margin-left: 10px
    }

    .cosp4 {
        flex: 1;
        text-align: right;
        margin-right: 10px
    }
}

@media (max-width:1128px) {
    .gn-select {
        flex-wrap: wrap;
    }

    .cosp5 {
        margin-bottom: 10px
    }
}
</style>
